<template>
    <el-submenu :index="index(menu)">
        <template slot="title">
            <i :class="menu.icon"></i>
            <span>{{menu.name}}</span>
        </template>
        <template v-if="isMenu(menu) && menu.children">
            <template v-for="cMenu in menu.children">
                <StElMenuSub  v-if="isMenu(cMenu)" :index="index" :is-menu="isMenu" :is-page="isPage" :menu="cMenu" :key="cMenu.id"></StElMenuSub>
                <StElMenuItem v-else-if="isPage(cMenu)" :index="index" :menu="cMenu" :key="cMenu.id"></StElMenuItem>
            </template>
        </template>
    </el-submenu>
</template>

<script>
    import StElMenuItem from './StElMenuItem.vue'
    export default {
        name: "StElMenuSub",
        components: {StElMenuItem},
        props: {
            menu: {
                type: Object,
                required: true
            },
            index: {
                type: Function,
                default: function (menu) {
                    return menu.id
                }
            },
            isMenu: {
                type: Function,
                default: function (menu) {
                    return menu.isMenu || menu.typeDictValue == 'menu'
                }
            },
            isPage: {
                type: Function,
                default: function (menu) {
                    return menu.isPage || menu.typeDictValue == 'page'
                }
            }
        }
    }
</script>

<style scoped>

</style>